<template>
  <el-card body-style="min-height: 86vh">
    <el-form :model="searchForm" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="汽修站">
            <el-input v-model="searchForm.enterpriseName" placeholder="请选择汽修站" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div></div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="repairName" label="汽修站" align="center" header-align="center" />
      <el-table-column prop="description" label="申请描述" align="center" header-align="center" />
      <el-table-column
        prop="isCheck"
        label="是否申请检测"
        align="center"
        header-align="center"
        width="150"
      >
        <template #default="{ row }">
          {{ row.isCheck ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="审核状态"
        align="center"
        header-align="center"
        width="180"
      >
        <template #default="{ row }">
          <el-button v-if="row.status == 1" type="primary" size="small">未审核</el-button>
          <el-button v-else-if="row.status == 2" type="success" size="small">审核通过</el-button>
          <el-button v-else-if="row.status == 3" type="danger" size="small">审核失败</el-button>
          <el-button v-else type="info" size="small">审核失败</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" header-align="center" width="280">
        <template #default="{ row }">
          <el-button type="primary" @click="handleViewRecord(row)">查看</el-button>
          <el-button v-if="row.status == 1" type="danger" @click="handleEditRecord(row)"
            >处理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <!-- 查看 -->
    <form-drawer ref="viewDrawerRef" title="查看" :isButton="false">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="汽修站">{{ curRecord.repairName }}</el-descriptions-item>
        <el-descriptions-item label="申请描述">{{ curRecord.description }}</el-descriptions-item>
        <el-descriptions-item label="是否申请检测资质">{{
          curRecord.isCheck === 0 ? "否" : "是"
        }}</el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <el-button v-if="curRecord.status === 1" type="primary" size="small">未审核</el-button>
          <el-button v-else-if="curRecord.status === 2" type="success" size="small"
            >审核通过</el-button
          >
          <el-button v-else-if="curRecord.status === 3" type="danger" size="small"
            >审核失败</el-button
          >
          <el-button v-else type="info" size="small">审核失败</el-button>
        </el-descriptions-item>
        <el-descriptions-item v-if="curRecord.status === 3" label="申请失败原因">{{
          curRecord.rejectReason
        }}</el-descriptions-item>
      </el-descriptions>
    </form-drawer>
    <!-- 处理 -->
    <form-drawer ref="applyDrawerRef" title="处理" @submit="handleSubmit">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100">
        <el-form-item label="审核状态" prop="isPass">
          <el-radio-group v-model="form.isPass">
            <el-radio :value="true">通过</el-radio>
            <el-radio :value="false">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="!form.isPass" label="不通过原因" prop="rejectReason">
          <el-input v-model="form.rejectReason" type="textarea" placeholder="请输入不通过原因" />
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
import { getSecondMaintainApplyListApi, auditSecondMaintainApplyApi } from "@/api/second";

const { searchForm, tableData, currentPage, limit, total, handleRestSearch, handleGetTableList } =
  useInitTable({
    searchForm: {
      licensePlate: ""
    },
    getTableList: getSecondMaintainApplyListApi
  });

// 选中项
const curRecord = ref<any>({});
// 查看
const viewDrawerRef = ref(null);
const handleViewRecord = (row: any) => {
  curRecord.value = row;
  (viewDrawerRef.value as any).open();
};
// 处理
const {
  formDrawerRef: applyDrawerRef,
  form,
  formRef,
  rules,
  handleEdit,
  handleSubmit
} = useInitForm({
  form: {
    isPass: true,
    rejectReason: ""
  },
  rules: {
    isPass: [{ required: true, message: "请选择审核状态", trigger: "change" }],
    rejectReason: [{ required: true, message: "请输入不通过原因", trigger: "blur" }]
  },
  updateData: auditSecondMaintainApplyApi,
  success: () => {
    handleGetTableList();
  }
});
const handleEditRecord = (row: any) => {
  handleEdit({
    id: row.id,
    isPass: form.isPass,
    rejectReason: form.rejectReason
  });
};
</script>
<style scoped lang="scss"></style>
